<template>
  <div class="func-comp-form">

    <div class="float-right">
      <Button size="small" type="primary" class="m-r-5px" @click="addLaunchQueueItem">增加</Button>
      <Button size="small" type="error" @click="removeLaunchQueueItem">删除</Button>
    </div>
    <div class="clearfix"></div>
    <Tabs name="main_tabs_child" size="small" v-model="tabValue" @on-click="tabClickHandler">
      <TabPane tab="main_tabs_child" :label="'队列'+(index+1)" v-for="(item, index) in launchQueue" :key="index">

        <Form :label-width="120">
          <FormItem label="队列类型">
            <RadioGroup v-model="item.type" type="button" size="small">
              <Radio label="default">采用预设</Radio>
              <Radio label="custom">完全自定义</Radio>
            </RadioGroup>
          </FormItem>
          <div v-if="item.type == 'default'">
            <FormItem label="发起的交互变量">
              <Input size="small" v-model="item.bindingVariateName" @on-blur="updateInteractionFieldsMap"/>
            </FormItem>
            <FormItem label="延迟发起">
              <InputNumber size="small" :max="10000000" :min="0" :step="100" v-model="item.delay" :active-change="false"></InputNumber> ms
            </FormItem>
            <FormItemPanel >
              <div slot="title">
                发起值
                <Tooltip content="最终必须将计算结果赋值给value" :max-width="200" placement="top">
                  <Icon type="md-information-circle" size="14" style="margin-bottom: 2px;"/>
                </Tooltip>
              </div>
              <CodeEditor v-model="item.value" :showLint="false"></CodeEditor>
            </FormItemPanel>
          </div>
          <div v-if="item.type == 'custom'">
            <FormItemPanel >
              <div slot="title">
                自定义内置交互发起逻辑
              </div>
              <CodeEditor v-model="item.customCode" :showLint="false"></CodeEditor>
            </FormItemPanel>
          </div>
        </Form>

      </TabPane>
    </Tabs>
    <Alert class="m-t-5px" type="warning" v-if="launchQueue.length == 0" show-icon>无内置交互发起队列</Alert>

  </div>
</template>

<script>

import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

import {createHelpers} from 'vuex-map-fields';

const {mapFields} = createHelpers({
  getterType: 'designer/getLayoutItem',
  mutationType: 'designer/updateLayoutItem',
});

export default {
  name: 'LaunchInteractionStreamCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
  mixins: [FuncCompFormMixin],
  data() {
    return {
      tabValue: 0
    }
  },
  mounted() {

  },
  methods: {
    tabClickHandler (name) {
      this.tabValue = name
    },
    addLaunchQueueItem () {
      this.launchQueue.push({
        type: 'default',
        bindingVariateName: '',
        value: "value = ''",
        customCode: '',
        delay: 0
      })
      this.tabValue = this.launchQueue.length - 1
    },
    removeLaunchQueueItem () {
      this.launchQueue.splice(this.tabValue, 1)
      this.tabValue = this.launchQueue.length == 0 ? this.launchQueue.length : this.launchQueue.length - 1
      this.updateInteractionFieldsMap()
    },
    updateInteractionFieldsMap () {
      let tmpInteractionFieldsMap = []
      this.launchQueue.forEach(item => {
        if (item.bindingVariateName) {
          tmpInteractionFieldsMap.push({
            fieldName: '',
            bindingVariateName: item.bindingVariateName,
            remark: 'test'
          })
        }
      })
      this.interaction_stream[0].interaction_fieldsMap = tmpInteractionFieldsMap
    }
  },
  computed: {
    ...mapFields({

      delay: 'component.compConfigData.delay',
      launchQueue: 'component.compConfigData.launchQueue',
      interaction_stream: 'component.compConfigData.interaction_stream',

    })
  }
}
</script>

<style scoped>

</style>
